<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据和方法实例3：其他</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="example">
        <p>{{ a }}</p>
    </div>

    <script>
    var data = { a: 1 }
    var vm = new Vue({
        el: '#example',
        data: data
    })

    vm.$data === data // => true
    vm.$el === document.getElementById('example') // => true

    // $watch 是一个实例方法
    vm.$watch('a', function (newValue, oldValue) {
        // 这个回调将在 `vm.a` 改变后调用
        console.log("a的值被改变啦！")
        console.log(newValue, oldValue)
    })

    // 尝试改变 a 的值，会发现页面进行了渲染，watch 定义的 function 也进行了执行（打开 devtool 可以看到）
    vm.a = 222
    </script>
</body>
</html>